<template>
  <ul class="label-list">
    <li @click="setActiveTag(null)">
      <span class="tag" v-if="!activeTag" style="background-color: #3593f2;">ALL</span>
      <span class="tag tag-unchecked" v-else>ALL</span>
    </li>
    <li v-for="tag in tags" :key="tag.id" @click="setActiveTag(tag)">
      <span class="tag" v-if="activeTag && activeTag.tagText === tag.tagText" :style="{ backgroundColor: '#3593f2'}">{{tag.tagText}}</span>
      <span v-else class="tag tag-unchecked">{{tag.tagText}}</span>
    </li>
  </ul>
</template>

<script>
  import {mapActions, mapGetters} from 'vuex'

  export default {
    name: 'tag-list',
    computed: {
      ...mapGetters([
        'tags', 'activeTag'
      ])
    },
    methods: {
      ...mapActions(['setTags', 'updateActiveTag']),
      setActiveTag (tag) {
        // 若是详情页面
        if (this.$route.name === 'BlogDetail') {
          this.updateActiveTag(tag)
          this.$route.push('/')
        } else {
          // 不是详情页面
          if (this.activeTag && tag && this.activeTag.tagText === tag.tagText) {
            this.updateActiveTag(null)
          } else {
            this.updateActiveTag(tag)
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
